<template>
  <div>
    <div class="cdsztk">
      <div class="cdsz_inp">
        <div class="close">
          <span @click="close">
            <a-icon type="close" />
          </span>
        </div>

        <ul>
                
          <li v-if="$parent.addnewcd==true" >
            <span class="lang_tit">父级：</span>
             <a-select 
                
                showSearch
                placeholder="请选择"
                optionFilterProp="children"
                style="width: 200px"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="selectCh"
                :filterOption="filterOption"  
                v-model="parentName"
              >
             
              <a-select-option  v-for="(item,i) in $parent.data"   :key="i" :value="item.id_num">{{item.cnName}}</a-select-option>
            </a-select>
          </li>
          <li >
            <span class="lang_tit">名称：</span>
            <a-input  placeholder="请输入名称：" v-model="cnName"  />
             <a-input  placeholder="请输入链接地址" v-model="url"  />
          </li>
          <li v-if="language.enName=='1'">
            <span class="lang_tit">英文：</span>
            <a-input  placeholder="请输入英文" v-model="enName"  />
             <a-input  placeholder="请输入链接地址" v-model="enurl"  />
          </li>
          <li v-if="language.dwName=='1'">
            <span class="lang_tit">德文：</span>
            <a-input  placeholder="请输入德文" v-model="dwName"  />
             <a-input  placeholder="请输入链接地址" v-model="dwurl"  />
          </li>
          <li v-if="language.ruName=='1'">
            <span class="lang_tit">俄文：</span>
            <a-input  placeholder="请输入俄文" v-model="ruName"  />
             <a-input  placeholder="请输入链接地址" v-model="ruurl"  />
          </li>
          <li v-if="language.jaName=='1'">
            <span class="lang_tit">日文：</span>
            <a-input  placeholder="请输入日文" v-model="jaName"  />
             <a-input  placeholder="请输入链接地址" v-model="jaurl"  />
          </li>
           <!-- <li >
            <span class="lang_tit">链接地址：</span>
            <a-input  placeholder="请输入链接地址" v-model="url"  />
          </li> -->
           <li >
            <span class="lang_tit">排序：</span>
           <a-input-number id="inputNumber" :min="0" :max="5000" v-model="sortvalue" />
          </li>
           <li>
            <span class="lang_tit">图片上传：</span>
              <div class="clearfix">
              <a-upload
                action="http://mobile.bearing.cn/set/upload.php"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
                accept=".jpg, .png"
              >

              <!--                  :remove="removelist"-->
                <div v-if="fileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li class="fot_btn">
            <a-button type="primary" @click="sublang">提交</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      pid:0,
      id: this.$parent.langtklist.id_num,
      keyname: this.$parent.addlang==false?this.$parent.langtklist.keyname:'',
      cnName: this.$parent.addlang==false?this.$parent.langtklist.cnName:'',
      dwName: this.$parent.addlang==false?this.$parent.langtklist.dwName:'',
      enName: this.$parent.addlang==false?this.$parent.langtklist.enName:'',
      jaName: this.$parent.addlang==false?this.$parent.langtklist.jaName:'',
      ruName: this.$parent.addlang==false?this.$parent.langtklist.ruName:'',
      parentName:this.$parent.parentName==undefined?this.$parent.langtklist.cnName:this.$parent.langtklist.parentName,
      url:this.$parent.addlang==false?this.$parent.langtklist.url:'',
      enurl:this.$parent.addlang==false?this.$parent.langtklist.enurl:'',
      dwurl:this.$parent.addlang==false?this.$parent.langtklist.dwurl:'',
      ruurl:this.$parent.addlang==false?this.$parent.langtklist.ruurl:'',
      jaurl:this.$parent.addlang==false?this.$parent.langtklist.jaurl:'',

      sortvalue:this.$parent.langtklist.sort,
      parentid:'',
      language:'',
      previewVisible: false,
        previewImage: '',
        fileList: [],
    };
  },

  methods: {
    close() {
      this.$store.state.tjwz = false;
      this.$parent.addlang=false
      this.$parent.langtklist=""
      this.$parent.addnewcd=true
    },
    sublang() {
      console.log(this.$parent.langtklist)
      let imgUrl=""
      if (this.$parent.addlang) {
       //新增
   
       if(this.fileList.length){
          imgUrl=this.fileList[0].thumbUrl
       }
        this.axios
          .post(
            "set/webSiteAdd.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              parentid:this.$parent.langtklist==""?this.pid:this.id,
              cnName: this.cnName,
              enName: this.enName,
              dwName: this.dwName,
              jaName: this.jaName,
              ruName: this.ruName,
              url:this.url,
              enurl:this.enurl,
              dwurl:this.dwurl,
              ruurl:this.ruurl,
              jaurl:this.jaurl,
              pic:imgUrl
            })
          )
          .then(res => {
            console.log(res);

            if (res.data.code == 303) {
              this.$store.state.tjwz = false;
              this.$parent.addlang=false
              this.$parent.langtklist=""
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$parent.handleChangelist(this.$parent.pagination);

            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        // 修改
        console.log(this.fileList)
          if(this.fileList.length){
            if(this.fileList[0].thumbUrl!=undefined){
                imgUrl=this.fileList[0].thumbUrl
            }else{
              imgUrl=this.fileList[0].url
            }
         }
        this.axios
          .post(
            "set/webSiteEdit.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              parentid:this.pid>=0?this.pid:this.$parent.langtklist.parentid,
              sort:this.sortvalue,
              id_num:this.id,
              cnName: this.cnName,
              enName: this.enName,
              dwName: this.dwName,
              jaName: this.jaName,
              ruName: this.ruName,
              enurl:this.enurl,
              dwurl:this.dwurl,
              ruurl:this.ruurl,
              jaurl:this.jaurl,
              url:this.url,
              pic:imgUrl,
             
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$store.state.tjwz = false;
              this.fileList=[]
              this.$parent.handleChangelist(this.$parent.pagination,this.$parent.serchvalue);
            } else {
              this.fileList=[]
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
     selectCh(value) {
        console.log(`selectedssssssssssssss ${value}`);
        this.pid=value
      },
      handleBlur() {
        console.log('blur');
      },
      handleFocus() {
        console.log('focus');
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
  
      handleCancel() {
        this.previewVisible = false;
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl;
        this.previewVisible = true;
      },
      handleChange({ fileList }) {
        this.fileList = fileList;
        console.log(fileList)
      },
      // 图片上传

  },

  created() {
     this.language=JSON.parse(sessionStorage.getItem("language"))
        setTimeout(() => {
      if (this.$parent.langtklist.img!= ""&&this.$parent.langtklist.img!= " "&&this.$parent.langtklist.img!=null) {
          let ss = {
            uid: this.$parent.langtklist.id_num,
            name: " ",
            status: "done",
            url:
              // "http://www.bearingcs.com" +
              this.$parent.langtklist.img
          };
          this.fileList.push(ss);
      }
      if (this.$store.state.tjwz&&this.$parent.addlang) {
        this.fileList = [];
      }
    
    }, 1000)

  }
};
</script>

<style lang='less' >
.cdsztk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .ant-input-affix-wrapper{
    width: 65%;
  }
  .cdsz_inp {
    position: relative;
    left: 50%;
    transform: translate(-50%, 20%);
    width: 65%;
    height: 500px;
    background-color: #fff;
    text-align: left;
    // overflow-x: scroll;
    .close {
      width: 100%;
      text-align: right;
      padding: 0 15px;
    }
    ul {
      padding: 20px;
      li {
        margin: 10px 0;
        
        .lang_tit {
          display: inline-block;
          width: 100px;
          text-align: right;
        }
        .ant-select-selection--single{
          width: 500px;
        }
        input {
          width: 300px;
        }
        //上传图片
          .clearfix {
            width: 10%;
            display: inline-block;
            vertical-align: middle;
            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }
      }
      .fot_btn {
        text-align: center;
      }
    }
  }
}
</style>
